// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import './index.less'
import {useState} from 'react'
import PropTypes, { bool } from 'prop-types'
import classNames from 'classnames'
import { debounce } from '../util/Utils'


/**
 * @onClick 点击事件
 * @cls 自定义类名
 * @children 子元素
 * @style 行内样式
 * @type 按钮类型
 * @size 按钮尺寸
 * @dashed 是否虚线
 * @solid 实线
 * @disable 能否使用
 * @clear 
 **/
export default function Button(props){
    let {
        onClick,
        cls,
        children,
        style,
        type,
        size,
        dashed,
        solid,
        disable,
        clear
    } = props
    let [state,setState] = useState('')
    // let [throttle, setThrottle] = useState(true)
    return(
        <div 
            className={
                classNames([
                    `button`, 
                    `btn-${size}`, 
                    `${state}`, 
                    `${((clear) || disable)?`nobg-${type}`:type}`,
                    dashed?'dashed':'',
                    solid?'solid':'',
                    cls,
                    disable?'disable':''
                ])}
            style={{...style}}
            onClick={
                debounce((e)=>{
                    if(onClick && !disable){
                        onClick(e)
                    }
                }) 
            }
            onMouseDown={()=>{
                if(!disable)
                    setState('click')
            }}
            onMouseUp={()=>{
                if(!disable)
                    setState('hover')
            }}
            onMouseEnter={()=>{
                if(!disable)
                    setState('hover')
            }}
            onMouseLeave={()=>{
                if(!disable)
                    setState('')
            }}
        >
            {children}
        </div>
    )
}

Button.propTypes = {
    onClick:PropTypes.func, // 点击事件
    cls:PropTypes.string, // 自定义className
    style:PropTypes.object,  // 自定义行内样式
    size:PropTypes.oneOf(['lg','sm','md', 'cir', 'cirMd', 'cirSm']),  // 内置尺寸
    type:PropTypes.string,  // 类型
    dashed:PropTypes.bool,  // 边框虚线
    solid:PropTypes.bool,    // 边框实线
    disable:bool,             // 禁用
    clear:bool
 }
Button.defaultProps = {
    children:'默认按钮',
    bgColor: '',
    size:'md',
    type:'normal',
    clear:false
}